<template>
  <div class="group">
    <img
      class="group-item"
      v-for="pic in list"
      :key="pic.goods_id"
      :src="imgUrl + pic.original_img"
    />
  </div>
</template>

<script setup>
import { ToastBottom, setObj, getObj } from "@/utils/index";
import {
  computed,
  onMounted,
  ref,
  reactive,
  toRefs,
  inject,
  defineProps,
  defineEmits,
} from "vue";
import { useRoute, useRouter } from "vue-router";
// 获取props
const props = defineProps({
  list: [Array],
});
const emit = defineEmits(["changePage"]);

const imgUrl = computed(() => {
  return process.env.VUE_APP_BASE_API;
});
//获取路由
const $_route = useRoute();
const $_router = useRouter();
const onCurrentChange = page => {
  console.log(page);
  emit("changePage", page);
};
</script>

<style lang="scss" scoped>
.group {
  @include flex(flex-start, center);
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  .group-item {
    // margin: 0 5px 5px 0;
    margin-right: 5px;
    height: 88px;

    &:nth-child(8n + 1),
    &:nth-child(8n + 2),
    &:nth-child(8n + 3) {
      width: calc((100% - 10px) / 3);
    }

    &:nth-child(8n + 4),
    &:nth-child(8n + 5),
    &:nth-child(8n + 6),
    &:nth-child(8n + 7),
    &:nth-child(8n + 8) {
      width: calc((100% - 20px) / 5);
    }

    &:nth-child(8n + 3) {
      margin-right: 0;
    }

    &:nth-child(8n + 8) {
      margin-right: 0;
    }
  }
}
</style>
